import React, { useState } from 'react'
import './Showimg.css'
export default function Showimg() {

    let [minimg, setMinimg] = useState(["/img/1.jpg", "/img/2.jpg", "/img/3.jpg", "/img/4.jpg", "/img/5.jpg"]);

    // let arr = ["/img/1.jpg","/img/2.jpg","/img/3.jpg","/img/4.jpg","/img/5.jpg"];

    let [id,setId]=useState(1);

    let getmouseover=(i)=>{
        return ()=>{
            setId(i+1);
            // alert(i)
        }
    }

    return (
        <div   className='showimg'>
            <div className='maximg'>
                <img src={`/img/${id}.jpg`} alt="" />
                {/* 另外一种简单一点的方法<img src={minimg[id]} alt="" />直接调用min数组用下标控制大图图片 */}
            </div>
            <div className='minimg'>
                <ul>
                    {
                        minimg.map((item,index)=>{
                            return <li key={index} onMouseOver={getmouseover(index)} className={index===id-1?'imgactive':''}>
                                    <img src={item} alt="" />
                                </li>
                        })
                    }
                    
                    
                    
                </ul>
            </div>

        </div>
    )
}
